<template>
  <div class="equipment-main">
    <div class="menu-container">
      <div class="menu-title">设备</div>
      <div @click="handleMenu">
        <div
          v-for="(v,k) in menuMap"
          :key="k"
          class="menu-item pointer"
          :data-menu="k"
          :class="{'is-active':activeMenu===k}"
        >{{ v }}
        </div>
      </div>
    </div>
    <div class="right-container">
      <DevicePage v-if="activeMenu==='device'" />
      <PrinterPage v-if="activeMenu==='printer'" />
      <SpeakerPage v-if="activeMenu==='speaker'" />
      <RuYiLitePage v-if="activeMenu==='ruYiLite'" />
    </div>
  </div>
</template>

<script>
import DevicePage from './components/DevicePage'
import PrinterPage from './components/PrinterPage'
import SpeakerPage from './components/SpeakerPage'
import RuYiLitePage from './components/RuYiLitePage'
export default {
  components: {
    DevicePage,
    PrinterPage,
    SpeakerPage,
    RuYiLitePage
  },
  data() {
    return {
      // 配置
      menuMap: {
        device: '终端',
        printer: '云打印机',
        speaker: '云音响',
        ruYiLite: '如意Lite'
      },
      // 状态
      // 数据
      activeMenu: 'device'
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    // 选择菜单
    handleMenu(e) {
      this.activeMenu = e.target.dataset.menu || this.activeMenu
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.equipment-main {
  height: 100%;
}

/*菜单容器*/
.menu-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  padding-right: 20px;
  border-right: 2px solid #f5f5f5;

  .menu-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
  }

  .menu-item {
    height: 36px;
    margin-bottom: 10px;
    padding: 0 20px;
    line-height: 36px;
    font-size: 14px;
    color: #303133;
    border-radius: 10px;

    &:not(.is-active) {
      &:hover {
        color: #303133;
        background-color: $overBg;
      }
    }
  }

  .is-active {
    color: #fff;
    background-color: $primary;
  }
}

/*右边容器*/
.right-container {
  padding-left: 150px;
}

</style>
